<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>NettySocket客户端</title>
    <script crossorigin="anonymous" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            src="http://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" type="text/javascript"></script>
    <style>
        body {
            padding: 20px;
        }

        #console {
            height: 300px;
            overflow: auto;
        }

        .username-msg {
            color: orange;
        }

        .connect-msg {
            color: green;
        }

        .disconnect-msg {
            color: red;
        }

        .send-msg {
            color: #888;
        }
    </style>
</head>
<body>
<h1>Netty-socketio示例</h1>
<h1>NettySocket客户端</h1>
<br/>
<div class="well" id="console"></div>

<!-- 添加用户名和消息的输入字段 -->
<input id="name" placeholder="用户名" type="text">
<input id="msg" placeholder="消息" type="text">
<button onclick="sendMessage()">发送消息</button>
<button onclick="sendDisconnect()">断开连接</button>

<script type="text/javascript">
    var socket = io.connect('192.168.4.80:30335?clientType=pc&token=token');

    socket.on('connect', function () {
        output('<span class="connect-msg">成功连接到服务端!</span>');
    });

    socket.on('testEvent', function (data) {
        output(JSON.stringify(data));
        showNotification(data.userName, data.message); // 显示桌面通知
    });

    socket.on('disconnect', function () {
        output('<span class="disconnect-msg">客户端已断开连接！</span>');
    });

    function sendDisconnect() {
        socket.disconnect();
    }

    function sendMessage() {
        var userName = $("#name").val();
        var message = $('#msg').val();
        $('#msg').val('');
        var data = {
            userName: userName,
            message: message
        };

        var jsonData = JSON.stringify(data);
        socket.emit('String', jsonData);
    }

    function output(message) {
        var time = '';
        var oDate = new Date(); // 实例化一个 Date 对象
        time += oDate.getFullYear() + '-'; // 获取当前年份
        time += (oDate.getMonth() + 1) + '-'; // 获取当前月份（月份从 0 开始，所以要加 1）
        time += oDate.getDate() + ' '; // 获取当前日期
        time += oDate.getHours() + ':'; // 获取当前小时
        time += oDate.getMinutes() + ':'; // 获取当前分钟
        time += oDate.getSeconds(); // 获取当前秒数

        var currentTime = "<span class='time'>" + time + "</span>";
        var element = $("<div>" + currentTime + " " + message + "</div>");
        $('#console').prepend(element);
    }

    function showNotification(userName, message) {
        if ("Notification" in window && Notification.permission === "granted") {
            var notification = new Notification("新消息", {
                body: "来自：" + userName + "\n" + "消息内容：" + message,
                icon: "https://example.com/notification-icon.png" // 替换为您自己的图标 URL
            });
        }
    }
</script>
</body>
</html>